<template>
	<gracePage statusBarBG="#EB5D4B" :customHeader="false">
		<view slot="gBody" class="grace-flex-v1 grace-border-b" id="gBody">
			<div class="pay_code_div":style="{backgroundImage:'url('+require('../../static/image/pay_code.png')+')'}">
			  <div class="code_no">会员账号 {{memberinfo.mobile}}</div>
			  <!-- <svg id="barcode" style="margin-top: 3vw;"></svg> -->
			  <img :src="require('../../static/image/pay_code1.png')" alt="">
			  <!-- <div id="qrcode" ref="qrcode"></div> -->
				<tki-qrcode
					style="margin-top: 60rpx;"
					ref="qrcode"
					:cid="cid"
					:val="val"
					:size="size"
					:unit="unit"
					:background="background"
					:foreground="foreground"
					:pdground="pdground"
					:icon="icon"
					:iconSize="iconsize"
					:lv="lv" 
					:onval="onval"
					:loadMake="loadMake"
					:usingComponents="usingComponents"
					@result="qrR" />
			  <div class="refresh_code">
			    <img :src="require('../../static/image/pay_code4.png')" alt="">
			    <span @click="refreshCode">点击刷新会员码</span>
			  </div>
			  <!-- <div class="pay_function">
			    <div>
			      <img src="../../assets/images/pay_code3.png" alt="">
			      <span>您还没有开通支付功能</span>
			    </div>
			    <span>立即开通</span>
			  </div> -->
			  <div class="pay_data">
			    <div>
			      <span>积分</span>
			      <span>{{memberinfo.point}}</span>
			    </div>
			    <span></span>
			    <div>
			      <span>余额</span>
			      <span>{{memberinfo.recharge}}</span>
			    </div>
			  </div>
			</div>
		</view>
	</gracePage>
</template>
<script>
import gracePage from '../../graceUI/components/gracePage.vue';
import graceNavBar from '../../graceUI/components/graceNavBar.vue';
import graceLoading from '../../graceUI/components/graceLoading.vue';
import tkiQrcode from "../../utils/tki-qrcode/tki-qrcode.vue"
var request = require('../../graceUI/jsTools/request.js');
export default {
	data() {
		return {
			ifShow: true,
			val: '二维码', // 要生成的二维码值
			size: 400, // 二维码大小
			unit: 'upx', // 单位
			usingComponents:true,
			background: '#ffffff', // 背景色
			foreground: '#333333', // 前景色
			pdground: '#333333', // 角标色
			icon: '', // 二维码图标
			iconsize: 40, // 二维码图标大小
			lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
			onval: false, // val值变化时自动重新生成二维码
			loadMake: true, // 组件加载完成后自动生成二维码
			src: '', // 二维码生成后的图片地址或base64
			cid:"",
			memberinfo:{}
		};
	},
	onReady: function() {
		this.creatQrcode()
	},
	onLoad: function(option) {
		this.gRequest.get('/login/getmemberinfo', {
			member_id:JSON.parse(uni.getStorageSync("userInfo")).member_id
		}, res => {
			this.setData({ memberinfo: res.data });
		});
	},
	methods: {
		refreshCode(){
			this.$refs.qrcode._makeCode()
		},
		qrR(res) {
			this.src = res
		},
		creatQrcode() {
			this.$refs.qrcode._makeCode()
		},
	},
	components: { gracePage, graceNavBar, graceLoading,tkiQrcode }
};
</script>
<style lang="scss">
	page{
		background-color: #EB5D4B;
	}
	#qrcode {
	  width: 52.6667vw;
	  height: 52.6667vw;
	  margin-top: 6vw;
	}
	
	.pay_code_div {
	  width: 89.3333vw;
	  height: 125.3333vw;
	  background-size: 100% 100%;
	  background-position: center;
	  background-repeat: no-repeat;
	  margin: 7vw auto 0;
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	
	  .code_no {
	    width: 100%;
	    height: 9vw;
	    line-height: 9vw;
	    text-align: center;
	    color: #C3B399;
	    font-size: 3.2vw;
	  }
	
	  >img:nth-of-type(1) {
	    width: 82.9333vw;
	    height: auto;
	    margin-top: 6vw;
	  }
	
	  >img:nth-of-type(2) {
	    width: 52.6667vw;
	    height: auto;
	    margin-top: 6vw;
	  }
	
	  .refresh_code {
	    display: flex;
	    flex-direction: row;
	    align-items: center;
	    justify-content: center;
	  }
	
	  .refresh_code>img {
	    width: 4vw;
	    height: auto;
	  }
	
	  .refresh_code>span {
	    font-size: 3.2vw;
	    color: #999999;
	    margin-left: 1vw;
	  }
	
	  .pay_function {
	    display: flex;
	    flex-direction: row;
	    align-items: center;
	    justify-content: space-between;
	    padding: 10vw 4vw 0;
	    width: 100%;
	  }
	
	  .pay_function div {
	    display: flex;
	    flex-direction: row;
	    align-items: center;
	  }
	
	  .pay_function div img {
	    width: 5.333vw;
	    height: auto;
	  }
	
	  .pay_function div span {
	    color: #333333;
	    font-size: 3.2vw;
	    margin-left: 2vw;
	  }
	
	  .pay_function>span {
	    width: 20vw;
	    height: 6.4vw;
	    text-align: center;
	    line-height: 6.4vw;
	    border: 1px solid rgba(235, 93, 75, 1);
	    border-radius: 3.2vw;
	    color: #EB5D4B;
	    font-size: 3.2vw;
	  }
	
	  .pay_data {
	    display: flex;
	    flex-direction: row;
	    align-items: center;
	    justify-content: center;
	    height: 12vw;
	    margin-top: 10vw;
	  }
	
	  .pay_data div {
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	    justify-content: center;
	  }
	
	  .pay_data div span:nth-child(1) {
	    color: #666666;
	    font-size: 3.2vw;
	    margin-bottom: 3.2vw;
	    font-weight: bold;
	  }
	
	  .pay_data div span:nth-child(2) {
	    color: #EB5D4B;
	    font-size: 4vw;
	    font-weight: bold;
	  }
	
	  .pay_data>span {
	    width: 2px;
	    height: 12vw;
	    background-color: rgba(229, 229, 229, 1);
	    margin: 0 16vw;
	  }
	}
</style>
